<template>
  <view class="container">
    <block v-for="(item, index) in data" :key="index">
      <view class="ordering_box">
        <view class="box_title flex">
          <image src="/static/mf/home/coin/FIL.png" />
          <view class="box_title_text flex1" v-if="locale == 'zh_TW'">{{
            item.goods_info.name
          }}</view>
          <view class="box_title_text flex1" v-else>{{
            item.goods_info.name_en
          }}</view>
          <view class="box_type">{{ item.state_text }}</view>
        </view>
        <view class="box_info flex">
          <view class="flex1">
            <view class="info_text">{{ $t("mf.order.total_power") }}</view>
            <view class="info_text">{{ $t("mf.order.earnings") }}</view>
            <view class="info_text">{{ $t("mf.order.buy_price") }}</view>
            <view class="info_text">{{ $t("mf.order.buy_number") }}</view>
          </view>
          <view class="info_data">
            <view class="info_number">{{ item.power_total }} T</view>
            <view class="info_number">{{ item.reward_total }} FIL</view>
            <view class="info_number">{{ item.price_total_m }} M</view>
            <view class="info_number">{{ item.number }}</view>
          </view>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  methods: {},
  computed: {
    ...mapGetters("system", ["locale"]),
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx;
}
.ordering_box {
  width: 100%;
  min-height: 495rpx;
  background: linear-gradient(270deg, #1b1b2b 0%, #232534 100%);
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.5);
  border-radius: 12rpx;
  box-sizing: border-box;
  padding: 44rpx;
  margin-bottom: 20rpx;
  position: relative;
}
.box_title {
  width: 100%;
  height: 48px;
  align-items: center;
  margin-bottom: 40rpx;
}
.box_title image {
  width: 64rpx;
  height: 64rpx;
  margin-right: 32rpx;
}
.box_title_text {
  height: 45rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 45rpx;
}
.box_type {
  height: 42rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffdb82;
  line-height: 42rpx;
}
.info_text {
  height: 80rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  line-height: 80rpx;
  margin-bottom: 20rpx;
  border-bottom: 1px solid #151935;
}
.info_text:last-child {
  border-bottom: none;
}
.info_number {
  height: 80rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 80rpx;
  text-align: right;
  margin-bottom: 20rpx;
  border-bottom: 1px solid #151935;
}
.info_number:last-child {
  border-bottom: none;
}
</style>